<template>
	<view class="goods-info">
		<view class="font-color-textPrimary pb-8 font-w-500" v-if="order.goods_type!=1&&order.collection_code&&order.collection_code.length>1">
			{{handleLang('商品编号')}}
		</view>
		<view class="flex flex-w  gap-12 mb-16"  v-if="order.goods_type!=1&&order.collection_code&&order.collection_code.length>1">
			<view class="font-size-12 pa-3 br-4 font-color-textPrimary" style="background-color: #F6F6F6;color: #8B8B8B;" v-for="item in order.collection_code" :key="item">
				#{{item}}
			</view>
		</view>
		
		<view class="font-color-textPrimary pb-8 font-w-500">
			{{handleLang('订单详情')}}
		</view> 
		<view class="flex flex-js-sb ptb-8 flex-ai-center font-color-textPrimary">
			<text>{{handleLang('订单金额:')}}</text>
			<view class="flex-center" v-if="order.order_type==7">
				<w-icon :name="order.crystal_type | crystal_type" size="16"></w-icon>
				<text class="ml-4 font-color-textPrimary font-size-14">{{ order.num }}</text>
			</view>
			<view class="font-size-16 font-color-textPrimary" v-else>
				<text>￥</text>
				<text>{{['8',8].includes(order.order_type)? order.price:order.total_price}}</text>
			</view>
		</view>
		<view class="flex flex-js-sb ptb-8 flex-ai-center font-color-666">
			<text>{{handleLang('订单ID号:')}}</text>
			<view class="font-size-16 font-color-textPrimary flex flex-ai-center">
				<text class="font-size-14">{{order.order_sn}}</text>
				<w-icon name="copy-dark" @click='$tools.copyText(order.order_sn)'></w-icon>
			</view>
		</view>
		<view class="flex flex-js-sb ptb-8 flex-ai-center font-color-666" v-if="order.buy_order_sn">
			<text>{{handleLang('分账ID号:')}}</text>
			<view class="font-size-16 font-color-textPrimary flex flex-ai-center">
				<text class="font-size-14">{{order.buy_order_sn}}</text>
				<w-icon name="copy-dark" @click='$tools.copyText(order.buy_order_sn)'></w-icon>
			</view>
		</view>
		<view class="flex flex-js-sb ptb-8 flex-ai-center font-color-666" v-if="!order.card||!order.card.length">
			<text>{{handleLang([1,2,'1','2'].includes(order.order_type)? '支付方式':"到账账户")}}:</text>
			<view class="font-size-16 font-color-textPrimary flex flex-ai-center ">
				<text class="font-size-14">{{order.pay_way|payName}}</text>
			</view>
		</view>
		<view class="" v-if="order.card&&order.card.length">
			<view class="font-size-14" v-for="(item,index) in order.card">
				<view class="flex flex-js-sb ptb-8">
					<text>E卡卡号{{order.card.length==1? "":index+1}}：</text>
					<view class="font-color-textPrimary flex flex-ai-center">
						<text>{{item.card_sn}}</text>
						<w-icon class='ml-4' name="copy-dark" @click='$tools.copyText(item.card_sn)'></w-icon>
					</view>
				</view>
				<view class="flex flex-js-sb ptb-8">
					<text>E卡密码{{order.card.length==1? "":index+1}}：</text>
					<view class="font-color-textPrimary flex flex-ai-center">
						<text>{{item.show_pwd? item.card_pwd:item.card_keys}}</text>
						<u-icon class='ml-4' :name="item.show_pwd? 'eye-fill':'eye-off'" color='#666666' @click='showECardPass(item)'></u-icon>
						<w-icon v-if="item.card_pwd" class='ml-8' name="copy-dark" @click='$tools.copyText(item.card_pwd)'></w-icon>
					</view>
				</view>
			</view>
		</view>
		<view v-if="order.order_status!=3&&step>-1" class="flex flex-ai-center flex-js-sb mt-16 pb-8">
			<view class="font-color-textPrimary   font-w-500"  >
				{{handleLang('拼团详情')}}
			</view>
			<view class="flex flex-ai-center" v-if="canyuCountDown>=0&&order.order_status==7&&order.order_type<3">
				<text class="font-size-14 font-color-theme">拼团结束:</text>
				<u-count-down @finish='finish' class='ml-8' :time="canyuCountDown" format="mm:ss"></u-count-down>
			</view>
		</view>
		<view class="mt-8" v-if="order.order_status!=3&&step>-1">
			<u-steps :current="step" direction="column" dot inactiveColor="#999" activeColor='#B91223'>
				<u-steps-item v-for="(key,index) in [1,7,2]">
					<view slot="desc" class='pb-20 font-size-14'
						:class='order.order_status==key? `font-color-theme`:`font-color-666`'>
						<text>{{ process[key].name }} <text v-if="index == 1 " class="ml-4">{{ order.already_spelled }}/{{ order.part_number }}</text></text>
						<text class='ml-8' v-if="order.order_status==key">（{{order[process[key].time]|formatDate}}）</text>
					</view> 
					<view class="slot-icon" slot="icon" :class='{active:order.order_status==key}'></view>
				</u-steps-item>
			</u-steps>
		</view>
		<view class="flex flex-dir-col font-size-12 font-color-666" v-if="[1,2,'1','2'].includes(order.order_type)&&order.order_status==1">
			<text>{{handleLang('说明:')}}</text>
			<text class='mt-4'>{{handleLang('1.超时未支付，系统会自动取消。')}}</text>
			<text class='mt-4'>{{handleLang('2.同一账号一段时间内累计取消3次订单,将会被限购一段时间。')}}</text>
		</view>
		
		<!-- 兑换密码验证 -->
		<!-- <password-authentification 
		ref="pwdAuth" 
		v-model="showPayPass"
		type="ECard"
		@finish="passRes"
		></password-authentification> -->
		
		
		<u-popup :show='showPayPass' round='12' bgColor="#22201D" mode='center'>
			<view class="ptb-26 br-12 auth-popup" style="width: 654rpx;">
				<w-icon size='24' @click='showPayPass=false' class='close' name="close3"></w-icon>
				<view class="pt-10 text-center font-color-textPrimary font-size-16 font-w-500">
					请输入操作密码
				</view>
				<view class="font-color-textPrimary font-size-12 text-center" @click="toForget">
					忘记密码？
				</view>
				<view class="flex flex-center mt-30">
					<u-code-input :focus='true' v-model="pwd" dot :maxlength="6" borderColor='transparent' @finish='passRes'>
					</u-code-input>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import OrderStatusMap from './orderStatusMap.js'
	import {getECardPass} from '@/api/shop/shop.js'
	export default {
		props: {
			order: {
				type: Object,
				default () {
					return {
						product: {}
					}
				}
			}
		},
		data(){
			return {
				showPayPass:false,
				ecard:{},
				pwd:''
			}
		},
		filters:{
			payName(v){
				let map={
					huifu:"钱包A",
					yibao:"易宝支付"
				}
				return map[v]
			},
			crystal_type(v){
				let map={
					'yellow':'hsj',
					'purple':'zsj',
					'blue':'lsj'
				}
				return map[v]
			}
		},
		computed: {
			step() {
				if (!this.order.order_status) return 0;
				return [1, 7, 2].indexOf(Number(this.order.order_status))
			},
			...mapState('config',{
				nowTimestamp(state){
					return state.nowTimestamp
				}
			}),
			canyuCountDown(){
				return (this.order.end_time)*1000-this.nowTimestamp
			},
			process(){
				return [[1,'createtime'],[7,'pay_time'],[2,'updatetime']].reduce((obj,item)=>{
					obj[String(item[0])]={
						name:OrderStatusMap[this.order.order_type][item[0]].process,
						time:item[1]
					}
					return obj
				},{})
				
			}
		},
		methods:{
			copy(){
				this.$tools.copyText(this.order.order_sn)
			},
			showECardPass(item){
				if(item.card_pwd){
					item.show_pwd=!item.show_pwd
				}else{
					this.showPayPass=true;
					this.ecard=item;
				}
			},
			toForget(){
				uni.navigateTo({
					url:'/pages/my/actionPwd/getCode?action=reset'
				})
			},
			passRes(res){
				getECardPass({
					pay_password:res,
					sn:this.ecard.card_sn,
					order_id:this.order.id
				}).then(res=>{
					let index=this.order.card.findIndex(v=>v.card_sn==this.ecard.card_sn)
					this.$set(this.order.card[index],'card_pwd',res.data)
					this.$set(this.order.card[index],'show_pwd',true)
					this.showPayPass=false;
					this.pwd='';
				})
			},
			finish(){
				this.$emit('changeInfo')
			}
		}
	}
</script>

<style lang="scss">
	.goods-info {
		.slot-icon {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			// background-color: #cfcfcf;
		}
		/deep/ .u-count-down__text{
			@extend .font-color-theme,.font-size-14;
			line-height: normal;
		}
		.slot-icon.active {
			background-color: $theme-color;
		}

		/deep/ .u-steps-item__line {
			background-color: #cfcfcf !important;
		}
		
		/deep/ .u-steps-item__wrapper {
			background-color: $item-bg-color !important;
		}
		
		/deep/ .slot-icon {
			background-color: #cfcfcf !important;
		}
		/deep/ .active {
			background-color: $theme-color !important;
		}
		/deep/ .u-code-input__item {
			background-color: #2e2a25 !important;
		}
		
		.auth-popup{
			position: relative;
			.close{
				position: absolute;
				right: 0;
				top:-80rpx;
				z-index: 2;
			}
			/deep/ .u-code-input{
				gap: 20rpx;
			}
			/deep/ .u-code-input__item {
				background-color: #ECECEC;
				@extend .br-8;
				width: 84rpx !important;
				height: 84rpx !important;
				margin-right: 0 !important;
			}
		}
	}
</style>